<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>佰林の菜单</title>
    <link rel="stylesheet" href="/common/layui/css/layui.css">
    <link rel="stylesheet" href="/admin/css/style.css">
    <script src="/common/layui/layui.js"></script>
    <script src="/common/jquery-3.3.1.min.js"></script>
    <script src="/common/vue.min.js"></script>
    <style>
        /*清除浮动*/
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
            font-size: 0;
        }
        .commodity-list{
            display: flex;
            justify-content: space-around;
        }
        .img-wrapper{
            align-self: center;
        }
        .img-wrapper > img{
            width: 260px;
            height: 200px;
            border-radius: 5%;
        }

        /*商品列表盒子样式*/
        .commodity-box{
            display: flex;
            flex-direction: column;
            /*align-items: center;*/
            justify-content: center;
            width: 280px;
            height: 300px;
            padding-top: 10px;
            border: 1px solid #bab6b6;
            background-color: #eeeeee;
            border-radius: 5%;
        }
        /*盒子中文字样式*/
        .commodity-title{
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        /* 会员价格*/
        .vip-price{
            float: right;
        }
    </style>
</head>
<body>
<!--<div id="app">-->
<div class="main" id="app">

    <div id="fixedData">
        <!--顶栏-->
        <header>
            <h1 v-text="webname"></h1>
            <div class="breadcrumb">
                <i class="layui-icon">&#xe715;</i>
                <ul>
                    <li v-for="vo in address">
                        <a v-text="vo.name" :href="vo.url"></a> <span>/</span>
                    </li>
                </ul>
            </div>
        </header>
        <!--左栏-->
        <div class="left">
            <ul class="cl">
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active"
                                                                                              class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)"
                           v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!--右侧-->
    <div class="right" id="Right">
        <div class="layui-row layui-col-space10" v-for="(e,index) of tableData" :key="index" style="margin-top:20px">
            <div class="layui-col-md3" v-for="(item,i) of e" :key="item.id">
                <div class="commodity-box" >
                    <div class="img-wrapper">
                        <img :src="`${item.img}`" alt="" >
                    </div>
                    <div>
                        <p class="commodity-title">
                            <span style="font-size: 20px;">{{item.commodityName}}</span>
                            <span style="font-size: 20px;color: rgb(99, 49, 22)">{{item.price}}元/份</span>
                        </p>
                        <p>
                        <p class="clearfix ">
                            <span class="vip-price layui-badge layui-bg-orange" style="margin-right: 20px">会员价</span>
                            <span class="vip-price" style="margin-right: 5px">￥{{item.vipPrice}}</span>
                        </p>
                        </p>
                        <div style="display: flex;justify-content: space-around;align-items: center">
                            <div>
                                <button type="button" class="layui-btn-sm layui-btn layui-btn-normal" @click="minusAmount(item.id)">
                                    <i class="layui-icon">－1</i>
                                </button>
                                <button type="button" class="layui-btn-sm layui-btn layui-btn-normal" @click="addAmount(item.id)">
                                    <i class="layui-icon">＋1</i>
                                </button>
                            </div>
                            <span>{{item.amount || 0}}份菜品</span>
                            <button type="button" class="layui-btn-sm layui-btn layui-btn-danger" @click="handleShopping(item)">
                                <i class="layui-icon">加入购物车</i>
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!--</div>-->
<script>
    layui.use('form', function () {
        var form = layui.form, layer = layui.layer, $ = layui.jquery;

        form.on('switch(state)', function (data) {
            var id = $(data.elem).attr("data-id");
            $.ajax({
                url: "/admin/article/state.html",
                data: {
                    id: id,
                },
                type: "get",
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        layer.msg(e.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(e.msg, {
                            icon: 2,
                            shade: 0.5,
                            time: 2000,
                            shadeClose: true
                        });
                    }
                }
            });
        });

        form.on('switch(top)', function (data) {
            var id = $(data.elem).attr("data-id");
            $.ajax({
                url: "/admin/article/top.html",
                data: {
                    id: id,
                },
                type: "get",
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        layer.msg(e.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(e.msg, {
                            icon: 2,
                            shade: 0.5,
                            time: 2000,
                            shadeClose: true
                        });
                    }
                }
            });
        });

        form.on('switch(experiment)', function (data) {
            var id = $(data.elem).attr("data-id");
            $.ajax({
                url: "/admin/article/experiment.html",
                data: {
                    id: id,
                },
                type: "get",
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        layer.msg(e.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(e.msg, {
                            icon: 2,
                            shade: 0.5,
                            time: 2000,
                            shadeClose: true
                        });
                    }
                }
            });
        });

        form.on('switch(works)', function (data) {
            var id = $(data.elem).attr("data-id");
            $.ajax({
                url: "/admin/article/works.html",
                data: {
                    id: id,
                },
                type: "get",
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        layer.msg(e.msg, {
                            icon: 1
                        });
                    } else {
                        layer.msg(e.msg, {
                            icon: 2,
                            shade: 0.5,
                            time: 2000,
                            shadeClose: true
                        });
                    }
                }
            });
        });
    });
</script>
<script src="/admin/js/config_user.js"></script>
</body>
<script>
    let right = new Vue({
        el: '#Right',
        data: {
            tableData:[]
        },
        methods:{
            /**
             * 处理加入购物车事件
             * */
            handleShopping(item){
                if(item.stock*1 < item.amount){
                    console.log('库存不够')
                    return
                }
                if(item.amount){
                    let username = JSON.parse( localStorage.getItem('userInfo') )?.username
                    console.log(username,'userId')
                    $.ajax({
                        url:'shoppingCar/addUpdate',
                        type:'post',
                        data:JSON.stringify({
                            userId:username,
                            newCommoduty:{
                                [item.commodityName] : item.amount
                            }
                        }),
                        contentType: "application/json;charset=UTF-8",
                        success: (data)=> {
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg('加入购物车成功');
                            });
                            this.getCommodityList()
                        }
                    })
                }else{
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('数量不能为0');
                    });
                }

            },
            /**
             * 增加商品
             * */
            addAmount(id){
                this.tableData.forEach(ele=>{
                    ele.forEach(item=>{
                        //修改点击的div中的字段
                        if(item.id===id){
                            let amount = item.amount || 0;
                            this.$set(item,'amount',amount+1)
                        }
                    })
                })
            },
            /**
             *减少div中点餐数量
             */
            minusAmount(id){
                this.tableData.forEach(ele=>{
                    ele.forEach(item=>{
                            //修改点击的div中的字段
                            if(item.id===id ){
                                let amount = item.amount || 0;
                                if(amount !== 0){
                                    this.$set(item,'amount',amount-1)
                                }
                            }
                    })
                })
            },
            /**
             * 获取商品信息列表
             */
            getCommodityList(){
                let commodityName = decodeURI( window.location.search.substring(1) )
                $.ajax({
                    url:'commodity/select',
                    type:'post',
                    data:JSON.stringify({
                        classification:commodityName,
                        isShow:0
                    }),
                    contentType: "application/json;charset=UTF-8",
                    success: (data)=> {
                        this.tableData = [];
                        console.log(data,'data')
                        if(isNotEmpty(data)){
                            let arr=[];
                            data.forEach((item,index)=>{
                                arr.push(item);
                                if(arr.length === 4 || data.length-1 === index){
                                    this.tableData.push(arr)
                                    arr=[];
                                }
                            })
                            console.log(this.tableData,'数据');
                        }
                    }
                })
            }
            },
            mounted() {
                this.getCommodityList()
            },
        })
</script>
</html>
